﻿@{
    ViewBag.Title = "JQueryAjax";
}
<h2>
    JQueryAjax</h2>
<section id="main2">
    <a id="AjaxCall" href="http://localhost:52328/">Ajax Call</a>
    <div id="content2">
    </div>
    <h1>
        Something to Save</h1>
    <form action="#">
    <input name="name" id="name" />
    <textarea name="textToSave" id="textToSave" cols="30" rows="10"></textarea>
    <p>
        <button type="submit">
            Save</button></p>
    </form>
    <a id="getData" href="http://localhost:52328/Home/GetData">Get Data</a>
    <div id="result">
    </div>
</section>
<script>

    //Beim Klick auf das Div wird direkt der Inhalt vom element mit der ID main in unseren content2 geladen
    //man kann hier noch einen Selector mit angeben nach der URL direkt mit im String
    $('#AjaxCall').on('click', function (e) {
        var href = $(this).attr('href');

        $('#content2').load(href + ' #main');
        e.preventDefault();
    });

    //Speichern und Ergebnis auswerten
    $('form').on('submit', function (e) {
        //mit Deferred kann man die Asynchrone Funktion erst aufrufen, wenn diese auch abgeschlossen wurde
        //und mann muss nicht eine Anonyme Methode direkt im ajax Call post erstellen.
        var dfd = $.Deferred();

        //Mit serialize werden alle Eingabefelder einer Form in einem String zusammengesetz wie z.B. name=blubu&textToSave=hallo
        $.post('http://localhost:52328/Home/Save', $(this).serialize(), dfd.resolve);
        //Disable default action
        e.preventDefault();

        //erst wenn der Vorgang abgeschlossen ist, das ergebnis der asynchronen methode anzeigen
        dfd.promise().then(function (result) {
            $('#result').text(result);
            console.log(result);
        });
    });

    //Nur Daten abrufen und anzeigen
    $('#getData').on('click', function (e) {
        var href = $(this).attr('href');
        $.post(href, function (result) {
            if (result) {
                $('#result').text(result);
                $('#textToSave').val(result);
            }
        });

        e.preventDefault();
    });


</script>
